<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> 订单管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.title" prefix-icon="el-icon-search" clearable placeholder="请输入关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <div class="handle-box">
                <el-radio-group v-model="query.status" @change="sortChange">
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="0">待发货</el-radio-button>
                    <el-radio-button label="1">已发货</el-radio-button>
                    <el-radio-button label="2">已完成</el-radio-button>
                    <el-radio-button label="3">已取消</el-radio-button>
                </el-radio-group>
            </div>
            <el-table
                :data="orderList"
                stripe
                style="width: 100%">
                <el-table-column
                    prop="index"
                    label="序号"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="commodity.title"
                    label="商品名称"
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="receiverAddress.name"
                    label="收件人"
                    align="center"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="receiverAddress.phone"
                    label="联系电话"
                    align="center"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="receiverAddress.address"
                    label="收货地址"
                    align="center"
                    width="250">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="订单状态"
                    align="center"
                    width="100">
                    <template slot-scope="scope" v-if='scope.row.status'>
                        <el-tag :type="scope.row.status === '0' ? 'warning'
                        : scope.row.status === '1' ? ''
                        : scope.row.status === '2' ? 'success'
                        : scope.row.status === '3' ? 'info' : 'danger'">
                            {{scope.row.status === '0' ? '待发货'
                            : scope.row.status === '1' ? '已发货'
                                : scope.row.status === '2' ? '已完成'
                                    : scope.row.status === '3' ? '已取消' : ''}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="data"
                    align="center"
                    label="下单时间"
                    width="180">
                    <template slot-scope="scope" v-if='scope.row.createTime'>
                        {{scope.row.createTime | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="deliveryTime"
                    label="发货时间"
                    align="center"
                    width="180">
                    <template slot-scope="scope" v-if='scope.row.deliveryTime'>
                        {{scope.row.deliveryTime | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="endTime"
                    label="订单完成时间"
                    align="center"
                    width="180">
                    <template slot-scope="scope" v-if='scope.row.endTime'>
                        {{scope.row.endTime | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="courierCompany"
                    label="快递公司"
                    align="center"
                    width="180">
                    <template slot-scope="scope" v-if='scope.row.courierCompany'>
                        {{scope.row.courierCompany}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="courierNumber"
                    label="快递单号"
                    align="center"
                    width="180">
                    <template slot-scope="scope" v-if='scope.row.courierNumber'>
                        {{scope.row.courierNumber}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" v-if="scope.row.status === '0'">
                        <el-button
                            type='text'
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">发货</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title='请录入快递信息' :visible.sync='dialogTableVisible'>
            <el-form ref='form' :model='orderEdit' label-width='80px'>
                <el-form-item label='快递公司'>
                    <el-input v-model='orderEdit.courierCompany'></el-input>
                </el-form-item>
                <el-form-item label='快递单号'>
                    <el-input v-model='orderEdit.courierNumber'></el-input>
                </el-form-item>
            </el-form>

            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogTableVisible = false'>取 消</el-button>
                <el-button type='primary' @click='submitOrder'>确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            orderEdit: {
                id: '',
                courierCompany: '',
                courierNumber: ''
            },
            dialogTableVisible: false,

            orderList: [],
            query: {
                pageIndex: 1,
                pageSize: 10,
                userId: '',
                status: '',
                title: ''
            },
            pageTotal: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData(){
            this.$axios.get(this.GLOBAL.httpUrl + "/order", {
                params: this.query
            }).then(res=>{
                this.pageTotal = res.data.data.totalCount;
                this.orderList = res.data.data.resultList
            })
        },
        // 分页导航
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        },
        handlePageChange(val){
            this.$set(this.query, "pageIndex", val)
            this.getData();
        },
        sortChange(){
            this.$set(this.query, 'pageIndex', 1);
            this.$set(this, 'pageTotal', 1);
            this.pageTotal = 0
            this.getData();
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        handleEdit(index, row) {
            this.orderEdit = row;
            this.dialogTableVisible = true;
        },
        submitOrder() {
            if (this.orderEdit.courierNumber === null
                || this.orderEdit.courierCompany === null
                || this.orderEdit.courierNumber === ''
                || this.orderEdit.courierCompany === '') {
                this.$message.warning("请录入快递信息")
                return;
            }
            if (this.orderEdit.courierNumber.length < 10) {
                this.$message.warning("快递单号格式不正确")
                return;
            }
            this.orderEdit.status = 1;
            this.orderEdit.deliveryTime = new Date();
            this.$axios.put(this.GLOBAL.httpUrl + "/order", this.orderEdit).then(res => {
                if (res.data.status == 200) {
                    this.getData();
                    this.orderEdit = {
                        id: '',
                        courierCompany: '',
                        courierNumber: ''
                    };
                    this.dialogTableVisible = false;
                }
            })
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 600px;
    height: 400px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
}
</style>